<script setup lang="ts">
import { t } from '@/i18n'
import { reactive, watch, ref } from 'vue'
const props = defineProps<{
  tableHeadData: any
  tableBodyData: any
}>()
</script>

<template>
  <table>
    <thead>
      <th v-for="item in tableHeadData" :key="item">
        {{ item }}
      </th>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableBodyData" :key="item.id">
        <td :title="item.name">
          {{ item.name }}
        </td>

        <td
          :title="item.cnRegion"
          :class="{
            red: item.cnRegion.includes('-'),
          }"
        >
          {{ item.cnRegion }}
        </td>
        <td
          :title="item.euAsiaRegion"
          :class="{ red: item.euAsiaRegion.includes('-') }"
        >
          {{ item.euAsiaRegion }}
        </td>
        <td
          :title="item.asiaPacificRegion"
          :class="{ red: item.asiaPacificRegion.includes('-') }"
        >
          {{ item.asiaPacificRegion }}
        </td>
        <td
          :title="item.americaRegion"
          :class="{ red: item.americaRegion.includes('-') }"
        >
          {{ item.americaRegion }}
        </td>
        <td
          :title="item.africaRegion"
          :class="{ red: item.africaRegion.includes('-') }"
        >
          {{ item.africaRegion }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style lang="scss" scoped>
table {
  border: 1px solid #0034a6;
  width: 100%;
  color:#fff;
  thead {
    th {
      height: 25px;
      vertical-align: middle;
    }
  }
  tbody {
    tr {
      height: 25px;
      td {
        width: 16%;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #0034a6;
        white-space: nowrap; /* 不允许文本换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分省略为省略号 */
        font-size: 10px;
      }
    }
  }
  .red{
    color: red;
  }
}
</style>
